<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:composition template="/shared/_layout.xhtml">
        <ui:define name="title">
            <h:outputText value="#{lang._library_index_title}"/>
        </ui:define>
        <ui:define name="css">
            <h:outputStylesheet name="form.css" library="css" />
            <h:outputStylesheet name="index.css" library="css/library" />
        </ui:define>
        <ui:define name="content">
            <article>
                <h1>
                    <h:outputText value="#{lang._library_index_library}"/>
                </h1>
                <section>
                    <h:form id="search">
                        <p>
                            <h:messages errorClass="errorMessage" infoClass="infoMessage" warnClass="warnMessage"/>
                        </p>
                        <p>
                            <h:inputText value="#{library.searchText}" size="45"/>
                            <h:outputText value="&#160;"/>
                            <h:commandButton value="#{lang._library_index_search}" action="#{library.search()}"/>
                        </p>
                    </h:form>
                    <h:form id="select-category">
                        <p>
                            <h:messages errorClass="errorMessage" infoClass="infoMessage" warnClass="warnMessage"/>
                        </p>
                        <p>
                            <h:selectOneMenu value="#{library.category}">
                                <f:selectItem itemLabel="#{lang._library_index_all_articles}" itemValue=""/>
                                <c:forEach items="#{library.categories}" var="item">
                                    <f:selectItem itemLabel="#{item.name}" itemValue="#{item.IDcategories}"/>
                                </c:forEach>
                            </h:selectOneMenu>
                            <h:outputText value="&#160;"/>
                            <h:commandButton value="Afficher" action="#{library.selectCategory()}"/>
                        </p>
                    </h:form>
                    <c:choose>
                        <c:when test="#{library.articlesSize > 0}">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>
                                            <h:outputText value="#{lang._library_index_name}"/>
                                        </th>
                                        <th>
                                            <h:outputText value="#{lang._library_index_price}"/>
                                        </th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <c:forEach items="#{library.articles}" var="item">
                                        <tr>
                                            <td class="book-image">
                                                <c:if test="#{item.idArticles.image != null}">
                                                    <h:graphicImage alt="#{item.idArticles.name}" library="img/books" name="#{item.idArticles.image}" height="75" width="50"/>
                                                </c:if>
                                            </td>
                                            <td>
                                                <h3>
                                                    <h:outputText value="#{item.idArticles.name}"/>
                                                </h3>
                                                <div>
                                                    <h:outputText value="#{item.idAuthors.name}"/>
                                                </div>
                                                <p>
                                                    <h:outputText value="#{item.idArticles.summary}"/>
                                                </p>
                                            </td>
                                            <td class="book-price"> 
                                                <h:outputText value="#{item.idArticles.price}€"/>
                                            </td>
                                            <td class="book-options"> 
                                                <h:form>
                                                    <h:commandButton action="#{library.selectArticle(item)}" value="#{lang._library_index_details}"/>
                                                </h:form>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                            <section id="page">
                                <h:form>
                                    <p id="pagination">
                                        <c:if test="#{library.hasBack()}">
                                            <h:commandButton value="Précédent" action="#{library.back()}"/>
                                        </c:if>
                                        <h:outputText value="&#160;"/>
                                        <c:if test="#{library.hasNext()}">
                                            <h:commandButton value="Suivant" action="#{library.next()}"/>
                                        </c:if>
                                    </p>
                                </h:form> 
                            </section>
                        </c:when>
                        <c:otherwise>
                            <p>
                                <h:outputText value="#{lang._library_index_empty}"/>
                            </p>
                        </c:otherwise>
                    </c:choose>
                </section>
            </article>
        </ui:define>
    </ui:composition>
</html>